<?php echo $header; ?>
<?php if ($error_warning) { ?>
<div class="warning"><?php echo $error_warning; ?></div>
<?php } ?>
<div class="box">
  <div class="left"></div>
  <div class="right"></div>
  <div class="heading">
    <h1 style="background: url('view/image/information.png') 2px 9px no-repeat;"><?php echo $heading_title; ?></h1>
    <div class="buttons"><a href="" rel="ADD_IMAGE" class="button"><span><?php echo $button_add_image; ?></span></a><a onclick="location = '<?php echo $cancel; ?>';" class="button"><span><?php echo $button_back; ?></span></a></div>
  </div>
  <div class="content">
  	<div id="tabs" class="htabs"><a tab="#tab_general"><?php echo $tab_image_list; ?></a></div>
    <form method="post" enctype="multipart/form-data" id="form">
    	<input type="hidden" name="gallery_id" value="<?php echo $gallery_id; ?>" />
        <input type="hidden" name="image" value="" id="image" />
        <input type="hidden" name="token" value="<?php echo $token; ?>" />
      <div id="tab_general">
      <table class="form2">        
		<tr>
            <td valign="top">
            	<div id="image_set">
                <?php foreach ($images as $key => $value): ?>
                	<div style="float:left; margin:.5em; padding:5px; border:1px solid #ccc;">
                        <img src="<?php echo $value['image_full_path']; ?>" class="image" alt="<?php echo $value['image_id']; ?>" />
                        <a href="<?php echo $delete_image_link ?>" rel="DELETE_IMAGE" style="display:block;">Delete</a>
                    </div>
                <?php endforeach; ?>
                </div>                
            </td>
        </tr>        
      </table>
      </div>
    </form>
  </div>
</div>
<div id="iwrapper_src" style="display:none; float:left; margin:.5em; padding:5px; border:1px solid #ccc;">
	<img src="<?php echo $preview; ?>" alt="na" class="image" />
    <a href="<?php echo $delete_image_link ?>" rel="DELETE_IMAGE" title="" style="display:block;">Delete</a>
</div>
<script type="text/javascript" src="view/javascript/jquery/ui/ui.draggable.js"></script>
<script type="text/javascript" src="view/javascript/jquery/ui/ui.resizable.js"></script>
<script type="text/javascript" src="view/javascript/jquery/ui/ui.dialog.js"></script>
<script type="text/javascript" src="view/javascript/jquery/ui/external/bgiframe/jquery.bgiframe.js"></script>
<script type="text/javascript" src="view/javascript/jquery/jquery.livequery.js"></script>
<script type="text/javascript"><!--

$(document).ready(function(){
	var id_counter = 0;
	$("a[rel='ADD_IMAGE']").click(function (e) {
		e.preventDefault();
		
		id_counter++;
		var new_obj = $('#iwrapper_src').clone().attr('id', 'iwrapper'+id_counter).show();
		$('#image_set').append(new_obj);	
	});
	
	// ----------------------------------------------------------------------------	
	
	$('#image_set img')
		.livequery('click', function () {
			var field = 'image';
			var ref = $(this);
			
			$('#dialog').remove();
			$('#content').prepend('<div id="dialog" style="padding: 3px 0px 0px 0px;"><iframe src="index.php?route=common/filemanager&token=<?php echo $token; ?>&field=' + encodeURIComponent(field) + '" style="padding:0; margin: 0; display: block; width: 100%; height: 100%;" frameborder="no" scrolling="auto"></iframe></div>');
			
			// get image's full path 
			$('#dialog').dialog({
				title: '<?php echo $text_image_manager; ?>',
				close: function (event, ui) {
					if ($('#' + field).attr('value')) {
						$.ajax({
							url: 'index.php?route=common/filemanager/image&token=<?php echo $token; ?>',
							type: 'POST',
							data: 'image=' + encodeURIComponent($('#' + field).val()),
							dataType: 'text',
							success: function(data) {
								ref.attr('src', data);
								save_image($("input[name='gallery_id']").val(), $('#' + field).attr('value'), ref);
								$('#' + field).attr('value', '');
							}
						});
					}
				},	
				bgiframe: false,
				width: 700,
				height: 400,
				resizable: false,
				modal: false
			});
		});
		
	// ----------------------------------------------------------------------------	
	
	$("a[rel='DELETE_IMAGE']")
		.livequery('click', function (e) {
			e.preventDefault();
			var image_id = $("img", $(this).parent()).attr('alt')
			var ref = $(this);
			
			if (image_id == 'na') {
				ref.parent().remove();
			} else {			
				$.ajax({
					url: '<?php echo $delete_image_link; ?>',
					type: 'POST',
					data: {id: image_id},
					dataType: 'json',
					success: function(data) {
						if (data.status == '1') {
							ref.parent().remove();
						}
					}
				});
			}
		});
		
});

/**
 * Save image to database
 * 
 * @param		int			gallery_id
 * @param		string		string
 * @image_ref	DOM_obj		image_ref
 */
function save_image(gallery_id, image_name, image_ref)
{
	$.ajax({
		url: '<?php echo $save_image_link; ?>',
		type: 'POST',
		data: {gallery_id: gallery_id, image_id: image_ref.attr('alt'), image_name: image_name},
		dataType: 'json',
		success: function(data) {
			if (data.status == '1') {
				image_ref.attr('alt', data.message);
			}
		}
	});
}

//--></script>
<?php echo $footer; ?>